<!-- 标注任务的通用头部 -->
<template>
  <div class="label-header">
    <div class="label-logo-wrap">
      <img src="@/assets/img/header-logo.svg" />
    </div>
    <div class="label-title">
      <p>
        {{ title }}
      </p>
      <div class="ml-12 inline-block font-size-14 font-400">
        <dmp-label :color="dmpLabelColor" border-radius="6px" :show-remove-button="false" height="28px" :title="dmpLabelText">
          {{ dmpLabelText }}
        </dmp-label>
      </div>
    </div>
    <div class="label-header-right">
      <div>
        <schedule :percent="percent" />
      </div>
      <a-dropdown placement="bottom">
        <a-button v-if="isEditable" class="icon-only-btn" @click.stop>
          <i class="iconfont icon-more-line" style="font-size: 18px"></i>
        </a-button>
        <template #overlay>
          <a-menu>
            <a-menu-item @click="handleUpdate"> 编辑 </a-menu-item>
            <a-menu-item @click="handleDelete"> 删除 </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>

  <delete-confirm-dialog
    v-model:show="isDeleteDialogShow"
    msg="任务删除后，不可恢复，请确认操作"
    :label="`请输入任务名称`"
    :confirm-name="deleteConfirmName"
    :loading="deleteConfirmLoading"
    @ok="onOkDeleteTask"
  />

  <edit-task-form ref="editTaskFormRef" :after-close-fn="afterCloseFn" />
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import { inject, Ref, ref } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute, useRouter } from 'vue-router'

  import { dmpTaskApi, textLabelApi } from '@/services/index'

  import DmpLabel from './DmpLabel.vue'
  import EditTaskForm from './EditTaskForm.vue'
  import Schedule from './Schedule.vue'

  const emits = defineEmits<{
    (key: 'update-success'): void
    (key: 'delete-success'): void
  }>()

  export interface Props {
    title?: string
    dmpLabelColor?: string
    dmpLabelText?: string
    percent?: number
  }

  withDefaults(defineProps<Props>(), {
    title: '',
    dmpLabelColor: '#1868E9',
    dmpLabelText: '',
    percent: 0
  })

  // 是否可编辑
  const isEditable = inject<Ref<boolean>>('isEditable') || ref(true)

  const router = useRouter()
  const route = useRoute()
  const pageParams = route.params
  const editTaskFormRef = ref<InstanceType<typeof EditTaskForm>>()

  // 获取任务详情
  const detailInfo = ref()
  const getTaskDetail = async () => {
    const { data } = await textLabelApi.getTaskDetail({}, { urlParams: { id: pageParams?.id } })
    detailInfo.value = data
  }
  const handleUpdate = async () => {
    await getTaskDetail()
    editTaskFormRef.value?.open({
      id: detailInfo.value.id,
      name: detailInfo.value.name,
      description: detailInfo.value.description
    })
  }
  const afterCloseFn = () => {
    emits('update-success')
  }

  // 删除任务
  const handleDelete = async () => {
    await getTaskDetail()
    deleteConfirmName.value = detailInfo.value.name
    isDeleteDialogShow.value = true
  }
  const deleteConfirmName = ref('')
  const isDeleteDialogShow = ref(false)
  const { loading: deleteConfirmLoading, runAsync: runDelTask } = useRequest(dmpTaskApi.del)
  const onOkDeleteTask = async () => {
    await runDelTask({}, { urlParams: { id: pageParams?.id }, isAddUid: true })
    isDeleteDialogShow.value = false
    message.success('删除成功')
    router.replace({
      path: '/dmp/task-list'
    })
    emits('delete-success')
  }
</script>

<style lang="less" scoped>
  .label-header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 54px;
    border-bottom: 1px solid #d9d9db;

    .label-logo-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 24px;
      width: 52px;
      height: 54px;
      border-right: 1px solid @border2;
    }

    .label-title {
      flex: 1;
      display: flex;
      min-width: 0;
      font-size: 20px;
      color: @text01;
      font-weight: 700;
      line-height: 28px;

      > p {
        .elliptical-1();
      }
    }

    .label-header-right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 24px;
      margin-left: auto;
      width: 320px;
    }
  }
</style>
